@import 'theme';
@import 'mixin';

// Default css variables to reduce flicker while JS is initializing
:root {
  --color-primary: #03DAC5;
  --color-primary-hover: #70EFDE;
  --color-primary-muted: #018786;
  --color-on-primary: #001210;
  --color-secondary: #EBEBEB;
  --color-secondary-hover: #D0D0D0;
  --color-on-secondary: #28303A;
  --color-success: #5CB85C;
  --color-success-hover: #4CAE4C;
  --color-on-success: #ffffff;
  --color-danger: #D9534F;
  --color-danger-hover: #C2413D;
  --color-on-danger: #ffffff;
  --color-warning: #F0AD4E;
  --color-warning-hover: #DB9A3F;
  --color-on-warning: #ffffff;
  --color-on-warning-2: #000000;
  --color-background: #233141;
  --color-surface-primary: #485B71;
  --color-surface-secondary: #2D3E4F;
  --color-overlay: #000000CC;
  --color-hover: #FFFFFF13;
  --color-hover-accent: #C9E0FA26;
  --color-divider: #6A7B8A;
  --color-divider-muted: #6A7B8A66;
  --color-text-primary: #EBEBEB;
  --color-text-secondary: #AAACB0;
  --color-text-help: #4C9BE8;
  --color-input-background: #42566B;
  --color-input-placeholder: #EBEBEB80;
  --color-table-accent: #283848;
  --color-icon-tunneling-1: #EAEAEA;
  --color-icon-tunneling-2: #CDCDCD;
  --url-loader: url(/static/img/loader/loader_dark-scheme.svg);
  --shadow-top-nav: 0px 2px 10px rgb(0 0 0 / 0.3);
  --border-radius-lg: 16px;
  --border-radius-md: 10px;
  --border-radius-sm: 6px;
  --border-radius-xs: 4px;
}

[data-tenant="kingroon"] {
  // Primary Color
  --color-primary: #ED7100;
  // Dark Background
  --color-background: #212224;
  // Surface Primary
  --color-surface-primary: #131920;
  // Surface Secondary
  --color-surface-secondary: #000000;
}

:root {
  --gap-between-blocks: 30px;
  --default-font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  @media (max-width: 768px) {
    --gap-between-blocks: 15px;
  }
}

/*** Global styles */
body {
  font-family: var(--default-font-family);
  position: relative;
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-text-primary);
}

.borderless {
  border: none !important;
}

button, .btn {
  border-width: 1px;
  border-radius: 300px;

  &.no-corner {
    border-radius: 0;
    border-width: 1px;
  }
  &.no-shadow {
    outline: none;
    box-shadow: none;
  }
  &.no-border {
    border: none;
  }
}

.btn {
  &:disabled, &.disabled {
    cursor: not-allowed;
    opacity: 0.35;
    pointer-events: all !important;
  }
}

.custom-control-label {
  &::before {
    border: var(--color-primary) solid 2px;
  }
}

.custom-switch {
  .custom-control-label {
    &::before {
      background: rgb(255 255 255 / .4)
    }
  }
}

.toggle-label {
  margin-bottom: 0;
  padding: 0.1rem 0 0.35rem 0;
}

.hint {
  cursor: help;
  border-bottom: dotted thin;
  line-height: initial;
  margin-bottom: 0.25em;
}

.hide {
  display: none;
}

#global-footer {
  padding: 23px 0;
  text-align: center;
  color: var(--color-text-primary);
  background-color: var(--color-surface-secondary);
  position: absolute;
  bottom: 0;
  width: 100%;

  p {
    margin: 0;
    font-size: .875rem;
  }

  @media (max-width: 768px) {
    background-color: var(--color-background);
  }
}

.text-subscript {
  font-size: 0.53em;
}

.bootstrap-select {
  button {
    &.dropdown-toggle {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }
    border-radius: 0;
  }
}

.navbar {
  padding: 0.5rem 1rem;
  background: var(--color-surface-primary) !important;

  a.navbar-brand {
    margin-top: -3px;
  }
  .nav-item {
    text-transform: uppercase;
    &.active, &:hover {
      background-color: var(--color-hover);

      // .nav-link {
      //   color: #fff !important;
      // }
    }
  }
  .nav-link {
    color: var(--color-text-primary) !important;
  }
  .user-menu {
    text-transform: none;
  }
  .glowing {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px var(--color-primary), 0 0 70px var(--color-primary), 0 0 80px var(--color-primary), 0 0 100px var(--color-primary), 0 0 150px var(--color-primary);
  }

  .badge-btn {
    position: relative;
    height: 1.8rem;
    margin-right: 1.5em;
    img {
      height: 1.3rem;
    }
    .badge {
      position: absolute;
      left: 22px;
      top: 1px;
      height: 18px;
      border-radius: 4px;
      background-color: var(--color-primary);
      transition: transform 0.2s; /* Animation */
      &:hover {
        transform: scale(1.3);
      }
    }
  }

  @media (min-width: 1200px) {
    padding: 0rem 1rem;
    .nav-item {
      padding: 0.5rem 0.24rem;
    }
  }

}

hr {
  background-color: var(--color-divider);
}

.alert {
  margin-bottom: 0;
  border-radius: var(--border-radius-sm);
}

a.link {
  color: var(--color-primary) !important;
  text-decoration: none;
  background-color: transparent;

  &:hover {
      color: var(--color-primary-hover) !important;
      text-decoration: underline !important;
      cursor: pointer !important;
  }
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--color-text-primary);

  &:hover, &:active, &:focus, &.active, &.dropdown-toggle {
    background: transparent !important;
    border: none !important;
    color: var(--color-text-primary) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
}

.dropdown-menu {
  .dropdown-item {
    i {
      width: 20px;
      margin-right: 16px;
      text-align: center;
    }
  }
}

.form-container {
  margin: 3em 0em;
  padding: 2.5em;
  background: var(--color-surface-secondary);
  -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1) !important;
  border: none !important;

  @include respond-below(md) {
    padding: 2em;
    margin: 0 -15px;
  }

  .form-control {
    background-color: var(--color-input-background);
    color: var(--color-text-primary);

    &[readonly] {
      opacity: .6;
    }
  }

  h2 {
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: var(--color-text-primary);

    &.text-danger {
      border-bottom-color: var(--color-danger);
    }
  }
}

.surface {
  background: var(--color-surface-secondary);
  padding: 2rem 2.5rem;
  border-radius: var(--border-radius-lg);

  @media (max-width: 768px) {
    padding: 1.5rem;

    &.with-loading-animation {
      padding-right: 2.5rem;
    }
  }
}

.full-on-mobile {
  margin: 0;
  @media (max-width: 768px) {
    margin: -15px;
    border-radius: 0;
  }
}

.surface-secondary {
  background-color: var(--color-surface-secondary);
}

.flipH {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.flipV {
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

.flipH.flipV {
  -webkit-transform: scaleX(-1) scaleY(-1);
  -moz-transform: scaleX(-1) scaleY(-1);
  -ms-transform: scaleX(-1) scaleY(-1);
  transform: scaleX(-1) scaleY(-1);
}

.swal2-popup {
  background-color: var(--color-surface-secondary) !important;
  border-radius: var(--border-radius-lg);
  overflow: hidden;

  .swal2-title, .swal2-content, #swal2-content {
    color: var(--color-text-primary) !important;
    text-align: left !important;
    font-weight: normal;
  }

  &.swal2-modal {
    .swal2-content {
      color: var(--color-text-primary) !important;
      font-size: 1rem !important;
    }
    .swal2-title {
      color: var(--color-text-primary) !important;
      font-size: 1.4rem !important;
    }
    .swal2-actions {
      display: flex;
    }
    button {
      border-radius: 300px !important;
      border: none !important;

      &.swal2-confirm {
        background-color: var(--color-primary) !important;
        color: var(--color-on-primary) !important;

        &:focus {
          box-shadow: none;
          background-image: none;
        }
      }

      &.swal2-styled {
        box-shadow: none;
        background-image: none;
      }
    }
    .bootstrap-select {
      button {
        border-radius: 0 !important;
      }
    }
  }

.swal2-styled {
  &.swal2-confirm {

  }
}
}

.swal2-container.error-alert #swal2-content {
  text-align: center !important;
}

.swal2-container {
  z-index: 1070 !important;
}

.swal2-container.swal2-backdrop-show.dark-backdrop {
  background-color: rgba(0,0,0,.6) !important;
}

.gauge {
  padding: 8px;
  margin-bottom: -150px;
}

.dh-icon {
  height: 1em;
  width: .8em;
  vertical-align: text-bottom;
}

.slider {
  &.slider-horizontal {
    width: 100% !important;
  }
  .slider-selection {
    background: var(--color-primary);
  }
  .slider-handle {
    box-shadow: 0 1px 5px 2px rgb(0 0 0 / 20%);
    background: var(--color-primary);
  }
}
.slider.slider-horizontal:hover, .slider.slider-vertical:hover {
  .tooltip.tooltip-main {
      opacity: 0.7 !important;
  }
  .tooltip-inner {
      font-size: 90%;
      width: auto;
  }
}
.slider.slider-horizontal:hover .tooltip.tooltip-main.top .tooltip-arrow:after,
.slider.slider-vertical:hover .tooltip.tooltip-main.top .tooltip-arrow:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  left: 45%;
  bottom: -10px;
  border: transparent 5px solid;
  border-top: #000 5px solid;
}

.accordion, #accordion {
  .card {
      background: var(--color-surface-secondary);
      border-color: var(--color-divider);
  }
  .card-header {
    border-color: var(--color-divider);
      a {
          color: inherit;
          text-decoration: none;
      }
  }
  .card-link {
      p {
        position:absolute;
        top:8px;
        right:20px;
        font-size:20px;
        -webkit-animation: minus 0.5s;
      }
      @keyframes minus {
          from {
              transform:rotate(0deg);
          }
          to {
              transform:rotate(360deg);
          }
      }
}
[aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {display: none;}
}

/** Shared styles for printer and print cards */

.card {
  background-color: var(--color-surface-primary);

  .gauge-container {
    padding: 0 16px;
  }
  .info-section {
    &.settings {
      text-align: center;
      padding-top: 7px;
      border-bottom: solid thin var(--color-divider);
    }

    background: var(--color-surface-secondary);
    .row {
      padding: 0.3em 0em 0.1em;
      text-align: center;
      div[class^="col-"] {
          padding: 0px 8px;
      }
    }
    .numbers {
      font-size: 1.5em;
    }
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid thin var(--color-divider);
      label {
        font-size: 1rem;
        text-align: left;
        width: 100%;
        .text-muted {
          font-size: 0.9em;
        }
      }
    }
  }
}

#pass-change-form button[type="submit"] {
    margin: 1.8em 0em 0.1em 0em;
}

.text-muted {
  color: var(--color-text-secondary) !important;
}

.btn-outline {
  color: var(--color-text-primary);

  &:hover {
    color: var(--color-text-primary);
  }
}

.btn-outline-secondary {
  color: var(--color-secondary);
  border-color: var(--color-secondary);

  &:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-on-secondary);
  }
}

.dropdown-menu {
  background-color: var(--color-surface-primary);
  border-radius: var(--border-radius-sm);

  .dropdown-item {
    color: var(--color-text-primary);

    &:hover:not(.active) {
      background-color: var(--color-hover);
      color: var(--color-text-primary);
    }
  }
}

#tl-fullscreen-modal {
  .modal-full {
    max-width: 100%;
    margin: 0;
  }

  .video-js {
    height: 0;
    height: calc(100vh - 243px);
  }
}



a {
  color: var(--color-primary);

  &:hover {
    text-decoration: none;
    color: var(--color-primary-hover);
  }
}

.alert a {
  &:hover {
    color: inherit;
    opacity: .8;
  }
}

.card-header {
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: inherit;
  border-color: inherit;
  background: none;
}

.btn-light.disabled, .btn-light:disabled {
  color: var(--color-text-primary);
}

input, input.form-control, select.form-control, textarea.form-control {
  background-color: var(--color-input-background);
  border: 1px solid var(--color-input-background);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  outline: none;

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--color-input-background) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
  }

  &::placeholder {
    color: var(--color-input-placeholder);
  }

  &:focus, &:active {
    border-color: var(--color-divider);
    outline: none;
    box-shadow: none;
  }
}

.custom-control-label::before {
  background-color: transparent;
  border-color: var(--color-text-primary);
}

.btn-outline-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);

  &:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-on-danger);
  }
}

.table {
  border-color: var(--color-divider);
  color: var(--color-text-primary);

  th, td {
    border-color: var(--color-divider);
  }
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-table-accent);
}

.swal2-popup .swal2-styled.swal2-cancel {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);

  &:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary) !important;
  }
}

.btn-primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary) !important;


  &:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
  }
}

.btn-danger {
  border-color: var(--color-danger);
  background-color: var(--color-danger);
  color: var(--color-on-danger);

  &:hover {
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
    color: var(--color-on-danger);
  }
}

.bg-danger {
  background-color: var(--color-danger);
}

.btn-success {
  border-color: var(--color-success);
  background-color: var(--color-success);
  color: var(--color-on-success);

  &:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-hover);
    color: var(--color-on-success);
  }
}

.bg-warning {
  background-color: var(--color-warning);
}

.text-success {
  color: var(--color-success) !important;
}

a.text-success {
  &:hover, &:focus {
    color: var(--color-success-hover) !important;
  }
}

.text-warning {
  color: var(--color-warning) !important;
}

a.text-warning {
  &:hover, &:focus {
    color: var(--color-warning-hover) !important;
  }
}

.alert-success .close:hover {
  color: var(--color-on-success);
  opacity: 1;
}

.alert-danger .close:hover {
  color: var(--color-on-danger);
  opacity: 1;
}

.alert-warning .close:hover {
  color: var(--color-on-warning);
  opacity: 1;
}

.alert-success {
  background-color: var(--color-success);
}

.dropdown-item.active, .dropdown-item:active {
  color: var(--color-on-primary);
}

.page-item {
  .page-link {
    background-color: var(--color-surface-secondary);
  }

  &.disabled .page-link {
    background-color: var(--color-surface-secondary);
    opacity: .6;
  }
}


.modal-content {
  background-color: var(--color-surface-secondary);
}

.modal-content .close {
  color: var(--color-text-primary);
}

.nav-tabs .nav-link,
.nav-tabs .nav-link:hover,
.nav-pills .nav-link,
.nav-pills .nav-link:hover {
  color: var(--color-text-primary);
  border-radius: var(--border-radius-xs);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-link.active {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-divider);
  color: var(--color-text-primary);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--color-divider);
}

.form-control:focus {
  background-color: var(--color-input-background);
  color: var(--color-text-primary);
}


// Table
.obico-table {
  &.top-border {
    border-top: 1px solid var(--color-divider);
  }
  .table-head {
    border-bottom: 1px solid var(--color-divider);
    font-weight: bold;
  }
  .table-row {
    display: flex;
    padding: 1em;
    & > * {
      flex: 1;
    }
  }
  @mixin break($breakpoint, $px) {
    &.break-#{$breakpoint} {
      .table-row {
        @media (max-width: $px) {
          flex-direction: column;
        }
      }
    }
  }
  @include break(xs, 576px);
  @include break(sm, 768px);
  @include break(md, 992px);
  @include break(lg, 1200px);
  .table-body {
    .table-row:nth-child(2n) {
      background-color: var(--color-table-accent);
    }
  }
}


.badge {
  &.badge-light {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}


.card-container {
  background: var(--color-surface-secondary);
  border-radius: var(--border-radius-lg);
  padding: 1.5em;
}

.btn {
  padding-left: 1rem;
  padding-right: 1rem;
}

div[id^="b-modal-"] {
  .modal-content {
    border: none;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
  }
}

.truncated-wrapper {
  overflow: hidden;
}

.truncated {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.b-dropdown-text {
  font-weight: normal;
}

.dropdown-menu.scrollable {
  max-height: calc(100vh - 75px);
  overflow-y: auto;
}

.dropdown-text-group {
  display: flex;
  align-items: center;
  .text {
    display: flex;
    flex-direction: column;
    .subtitle {
      font-size: 0.75rem;
      color: var(--color-text-secondary)
    }
  }
}

.section-title {
  font-weight: bold;
  font-size: 1.5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 1.5rem;
}

.swal2-checkbox {
  background: none;
  font-size: 1rem;
}


.btn.ghost {
  text-decoration: none;
  color: var(--color-text-primary);
  outline: none;
  box-shadow: none;

  &:hover {
    opacity: 0.9;
  }
}

.btn-warning {
  background-color: var(--color-warning);
  color: var(--color-on-warning);
}


.custom-button {
  padding: 0.5rem 1.5rem;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-width: 1px;
  flex-shrink: 0;
}

.print-status-bg {
  &.finished {
    background-color: var(--color-success);
  }
  &.cancelled {
    background-color: var(--color-danger);
  }
  &.printing {
    background-color: var(--color-text-primary);
  }
  &.paused {
    background-color: var(--color-warning);
  }
}

.print-status-color {
  &.finished {
    color: var(--color-success);
  }
  &.cancelled {
    color: var(--color-danger);
  }
  &.printing {
    color: var(--color-text-primary);
  }
  &.paused {
    color: var(--color-warning);
  }
}


.btn.btn-background {
  background-color: var(--color-background);
  color: var(--color-text-primary);

  &:hover {
    opacity: .8;
  }
}

// bootstrap pagination button colors
.page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.page-link:focus {
  box-shadow: none;
}

// bootstrap checkbox colors
.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--color-primary);
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.text-primary {
  color: var(--color-primary) !important;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  background-color: var(--color-primary);
}
.btn-primary:focus, .btn-primary.focus {
  background-color: var(--color-primary);
  box-shadow: none;
}
.btn:focus, .btn.focus {
  box-shadow: none;
}
.btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.border-radius-lg {
  border-radius: var(--border-radius-lg);
}
.kingroon-page {
  background: #212224;
}
#kingroon-footer {
  padding: 23px 0;
  text-align: center;
  background-color: #131920 !important;
  color: var(--color-text-primary);
  position: absolute;
  bottom: 0;
  width: 100%;
}
.first-layer-video-wrapper {
  display: flex;
  .card-img-top {
    display: flex;
    justify-content: center;
    border-radius: var(--border-radius-md);
  }
  .buttons-container {
    border-radius: var(--border-radius-md);
    background-color: unset !important;
  }
  .action-btn {
    font-size: 1rem !important;
  }
  .vjs-tech {
    position: relative !important;
  }
  .vjs-poster {
    border-radius: var(--border-radius-md);
  }
  .video-js {
    border-radius: var(--border-radius-md);
    height: 240px;
    @media (max-width: 576px) {
      height: 300px;
    }
    @media (max-width: 1198px) and (min-width: 991px) {
      height: 300px;
    }
  }
}
.first-layer-modal-video-wrapper {
  display: flex;
  .card-img-top {
    display: flex;
    justify-content: center;
    border-radius: var(--border-radius-md);
  }
  .buttons-container {
    border-radius: var(--border-radius-md);
    background-color: unset !important;
  }
  .action-btn {
    font-size: 1rem !important;
  }
  .vjs-tech {
    position: relative !important;
  }
  .vjs-poster {
    border-radius: var(--border-radius-md);
  }
  .video-js {
    border-radius: var(--border-radius-md);
    height: 510px;
    @media (max-width: 991px) {
      height: 400px;
    }
  }
}
.webcam-dropdown {
  button {
    color: var(--color-text-primary);
    font-size: 14px;
  }
  ul {
    transform: translate3d(-55%, 31px, 0px) !important;
  }
}